<template>
    <jb-page title-icon="material-symbols:print" title-text="Hiprint模板测试打印">
        <template #opt>
            <div class="flex items-center">
                <!--       Web打印Web pdf  -->
                <jb-btn @click="print1"> Web打印(使用已经渲染html区域) </jb-btn>
                <jb-btn @click="toPdf1"> 导出PDF(使用已经渲染html区域) </jb-btn>

                <!--       动态打印动态PDF       -->
                <jb-btn @click="print2"> Web打印(动态) </jb-btn>
                <jb-btn @click="toPdf2"> 导出PDF(动态) </jb-btn>
            </div>
        </template>
        <div class="flex justify-between h-full">
            <n-card class="preview-body w-49%">
                <jb-hiprint
                    ref="jbPrintRef"
                    template-sn="test"
                    data-url="api/admin/hiprint/tpl/testJsonData"
                ></jb-hiprint>
            </n-card>
            <div class="w-49% flex-col">
                <n-card title="使用左侧已经渲染HTML">
                    <div class="mb-16px">
                        <jb-btn @click="print1"> Web打印 </jb-btn>
                        <jb-btn class="ml-8px mr-8px" @click="print1(true)">
                            socket直接打印
                        </jb-btn>
                        <jb-btn @click="toPdf1"> 导出PDF </jb-btn>
                    </div>

                    <n-card>
                        <div>
                            左侧使用的是JbHiprint组件，该组件支持传入模版sn和数据，完成渲染。并通过ref对外提供
                            <b>print</b> 和 <b>toPdf</b> 两个函数
                        </div>
                        <div>
                            打印: jbPrintRef.print(clientPrint:boolean) 参数 clientPrint
                            代表是否调用hiprint
                            client客户端进行打印，默认为false，表示调用浏览器打印;
                        </div>
                        <div>导出PDF: jbPrintRef.toPdf();</div>
                    </n-card>
                </n-card>

                <n-card class="mt-10" title="动态加载模板和数据">
                    <div class="mb-16px">
                        <jb-btn @click="print2"> Web打印 </jb-btn>
                        <jb-btn class="ml-8px mr-8px" @click="print2(true)">
                            socket直接打印
                        </jb-btn>
                        <jb-btn @click="toPdf2"> 导出PDF </jb-btn>
                    </div>
                    <n-card>
                        <div>
                            框架提供 <b>JBoltPrint</b> 工具函数，支持直接调用打印和导出PDF
                        </div>
                        <div>
                            通过url获取数据进行打印: JBoltPrint.printByUrl(sn, url,
                            clientPrint=false)
                        </div>
                        <div>
                            通过传入json数据进行打印: JBoltPrint.printByJson(sn, data,
                            clientPrint=false)
                        </div>

                        <div>
                            通过url获取数据导出pdf: JBoltPrint.toPdfByUrl(sn, url,
                            name='文件')
                        </div>
                        <div>
                            通过传入json数据导出pdf: JBoltPrint.toPdfByJson(sn, data,
                            name='文件')
                        </div>
                    </n-card>
                </n-card>
            </div>
        </div>
    </jb-page>
</template>

<script setup lang="ts">
import 'jquery'
import { ref } from 'vue'
import JbBtn from '@/components/_builtin/jb-btn/index.vue'
import { JBoltPrint } from '@/utils/print'

const jbPrintRef = ref()

function print1(printWithoutPreview = false) {
    jbPrintRef.value.print(printWithoutPreview)
}

function print2(printWithoutPreview = false) {
    JBoltPrint.printByUrl(
        'test',
        'api/admin/hiprint/tpl/testJsonData',
        printWithoutPreview
    )
}

function toPdf1() {
    jbPrintRef.value.toPdf()
}
function toPdf2() {
    JBoltPrint.toPdfByUrl('test', 'api/admin/hiprint/tpl/testJsonData')
}
</script>

<style scoped lang="scss">
div {
    margin-bottom: 8px;
}
</style>
